<template>
  <div class="login-form">
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px; width: 300px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <h1 style="text-align: center">账号注册</h1>
      <!-- 用户名表单 -->
      <el-form-item prop="userName">
        <el-input
          v-model="ruleForm.userName"
          placeholder="用户名"
          @blur="validateUsername"
        />
        <div v-show="flagA" style="color: red; height: 8px">用户名格式错误</div>
      </el-form-item>
      <el-form-item prop="email">
        <el-input
          v-model="ruleForm.email"
          placeholder="邮箱"
          @blur="validateEmail"
        />
        <div v-show="flagC" style="color: red; height: 8px">邮箱格式错误</div>
      </el-form-item>
      <!-- 密码表单 -->
      <el-form-item prop="password">
        <el-input
          v-model="ruleForm.password"
          placeholder="输入密码"
          show-password
          type="password"
          @blur="validatePassword"
        />
        <div v-show="flagB" style="color: red; height: 8px">密码格式错误</div>
      </el-form-item>
      <!-- 强度器 -->
      <el-form-item v-if="flagB">
        <div class="input_span">
          <span
            :style="{
              'background-color':
                msgText > 1 || msgText == 1 ? '#FC5F76' : '#BBBBBB',
              color: msgText > 1 || msgText == 1 ? '#FC5F76' : '#BBBBBB',
            }"
            >弱</span
          >
          <span
            :style="{
              'background-color':
                msgText > 2 || msgText == 2 ? '#FF9900' : '#BBBBBB',
              color: msgText > 2 || msgText == 2 ? '#FF9900' : '#BBBBBB',
            }"
            >中</span
          >
          <span
            :style="{
              'background-color':
                msgText > 4 || msgText == 4 ? '#33CC00' : '#BBBBBB',
              color: msgText > 4 || msgText == 4 ? '#33CC00' : '#BBBBBB',
            }"
            >强</span
          >
        </div>
      </el-form-item>
      <!-- 确认密码 -->
      <el-form-item prop="password">
        <el-input
          v-model="ruleForm.rePassword"
          placeholder="确认密码"
          show-password
          type="password"
          @blur="validateRePassword"
        />
        <div v-show="flagD" style="color: red; height: 8px">两次密码不一致</div>
      </el-form-item>
      <el-form-item>
        <el-button @click="registerMethod" style="width: 300px" type="primary"
          >立即注册</el-button
        >
      </el-form-item>
    </el-form>
    <Code style="margin: 0px"></Code>
  </div>
</template>

<script setup>
import { reactive, ref, watch, onMounted } from "vue";
import { register } from "../api/register";
import { useRouter } from "vue-router";
import Code from "./Code.vue";
import { ElMessage, ElMessageBox } from "element-plus";

//路由对象
const router = useRouter();

const formSize = ref("default");
const ruleFormRef = ref();
const ruleForm = reactive({
  userName: "",
  password: "",
  email: "",
  rePassword: "",
});

//校验用户名
let flagA = ref(false);
const validateUsername = () => {
  var regx = /^[a-zA-Z][a-zA-Z0-9_-]{5,}$/;
  flagA.value = !regx.test(ruleForm.userName);
};

//校验密码
let flagB = ref(false);
const validatePassword = () => {
  var regx = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/;
  flagB.value = !regx.test(ruleForm.password);
};
//校验邮箱
let flagC = ref(false);
const validateEmail = () => {
  var regx = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
  flagC.value = !regx.test(ruleForm.email);
};
//校验两次密码是否一致
let flagD = ref(false);
const validateRePassword = () => {
  flagD.value = ruleForm.password != ruleForm.rePassword ? true : false;
};
// 密码强度器
const msgText = ref("");
const checkStrong = (sValue) => {
  var modes = 0;
  //正则表达式验证符合要求的
  if (sValue.length < 1) return modes;
  if (/\d/.test(sValue)) modes++; //数字
  if (/[a-z]/.test(sValue)) modes++; //小写
  if (/[A-Z]/.test(sValue)) modes++; //大写
  if (/\W/.test(sValue)) modes++; //特殊字符
  switch (modes) {
    case 1:
      return 1;
      break;
    case 2:
      return 2;
      break;
    case 3:
    case 4:
      return sValue.length < 4 ? 3 : 4;
      break;
  }
  return modes;
};

//监听器
watch(
  () => ruleForm.password,
  (keyWord, oldname) => {
    msgText.value = checkStrong(keyWord);
  }
);

onMounted(() => {
  if (ruleForm.password) {
    msgText.value = checkStrong(ruleForm.password);
  }
});

//注册
const registerMethod = async () => {
  const { data } = await register(ruleForm);
  if (data.code == 200) {
    ElMessage.success("注册成功");
    router.push("/login");
  }
};
</script>

<style scoped>
.login-form {
  width: 500px;
  height: 500px;
  margin: 200px 800px;
}

a {
  color: black;
  font-size: 14px;
  text-decoration: none;
  margin-left: 160px;
}

.input_span {
  height: 8px;
  display: flex;
  float: right;
  width: 100px;
}
span {
  display: inline-block;
  width: 30%;
  border-radius: 8px;
  margin-right: 3px;
  text-align: center;
  margin-top: 3px;
}
</style>